<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">影院管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>影院列表</el-breadcrumb-item>
      <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 操作按钮 -->
    <el-button type="primary" @click="showAddCinemaRoomDialog()"
      >新增放映厅列表</el-button
    >
    <el-divider content-position="left">放映厅列表</el-divider>
    <el-empty
      v-if="!tableData || tableData.length == 0"
      description="当前影院暂无放映厅"
    ></el-empty>
    <div v-else>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          prop="room_name"
          label="放映厅名称"
          width="250"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="room_type"
          label="放映厅类型"
          width="200"
        >
        </el-table-column>
        <el-table-column align="center" prop="room_size" label="放映厅人数">
          <template slot-scope="scope">
            <span v-if="scope.row.room_size">{{ scope.row.room_size }}</span>
            <span v-else style="color: #aaa">[请先配置座位模版]</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              title="查看排片计划列表"
              @click="$router.push(`/home/showingon-plan/list/${scope.row.id}`)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-plus"
              circle
              title="添加排片计划"
              @click="$router.push(`/home/showingon-plan/${scope.row.id}`)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-s-grid"
              circle
              title="配置放映厅座位模版"
              @click="
                $router.push(`/home/cinema-room-seat-template/${scope.row.id}`)
              "
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              title="删除放映厅"
              @click="showDeleteDialog(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加放映厅 -->
    <el-dialog title="添加放映厅" :visible.sync="dialogAddCinemaRoomVisible">
      <el-form :model="form">
        <el-form-item label="放映厅名称" label-width="200">
          <el-input
            style="width: 300px"
            v-model="form.room_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="放映厅类型" label-width="200">
          <el-select
            style="width: 300px"
            v-model="form.room_type"
            placeholder="请选择放映厅类型"
          >
            <el-option
              v-for="item in cinemaRoomTypes"
              :key="item.id"
              :label="item.type_name"
              :value="item.type_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddCinemaRoomVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogAddCinemaRoomVisible: false, //添加放映厅窗口是否可见
      cinemaRoomTypes: "", //放映厅类型
      form: {
        movie_cinema_id: this.$route.params.id, //绑定当前电影院
        room_name: "",
        room_type: "",
      },
      tableData: [],
    };
  },
  mounted() {
    this.loadAllCinemaRoomTypes();
    //当前电影院所有放映厅
    this.loadCinemaRoomsByCinemaId();
  },
  methods: {
    //删除放映厅
    showDeleteDialog(id) {
      this.$confirm("此操作会永久放映厅，已有排期将作废，是否确定删除", "注意")
        .then((res) => {
          return this.$http.CinemaRoomApi.delete({ id });
        })
        .then((res) => {
          console.log("删除放映厅", res);
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.loadCinemaRoomsByCinemaId();
          }
        });
    },
    //当前电影院所有放映厅
    loadCinemaRoomsByCinemaId() {
      this.$http.CinemaRoomApi.list({
        cinema_id: this.form.movie_cinema_id,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    //提交添加放映厅请求
    onSubmit() {
      this.$http.CinemaRoomApi.add(this.form).then((res) => {
        console.log("添加放映厅", res);
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.dialogAddCinemaRoomVisible = false;
          this.form.room_name = "";
          this.form.room_type = "";
          this.loadCinemaRoomsByCinemaId();
        }
      });
    },
    //显示弹窗
    showAddCinemaRoomDialog() {
      this.dialogAddCinemaRoomVisible = true;
    },
    //加载放映厅类型
    loadAllCinemaRoomTypes() {
      this.$http.CinemaRoomApi.queryAllTypes().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.cinemaRoomTypes = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>